import { Button, ButtonGroup, Card, Space, Tooltip } from '@douyinfe/semi-ui';
import {
  IconSettingStroked,
  IconArrowUpLeft,
  IconDoubleChevronRight,
} from '@douyinfe/semi-icons';
import { useEffect, useMemo } from 'react';
import { usePageContext } from './context';
import DepartmentFilter from './filter';
import DepartmentTable from './table/table';
import { useDispatch } from 'react-redux';
import { fetchItems } from '@/redux/department/department-actions';
import { useNavigate } from 'react-router-dom';

const DepartmentCard = () => {
  const navigate = useNavigate();

  const PageContext = usePageContext();
  const PageAction = useMemo(() => {
    return {
      addRecord: PageContext.addRecord,
      queryParams: PageContext.queryParams,
      showSider: PageContext.showSider,
      setShowSider: PageContext.setShowSider,
    };
  }, [PageContext]);

  const dispatch = useDispatch<any>();
  useEffect(() => {
    dispatch(fetchItems(PageAction.queryParams)).then((res: any) => {
      console.log(res);
    });
  }, [PageAction.queryParams]);

  return (
    <div className='flex gap-x-4 h-full'>
      <div className='flex flex-col gap-y-4 flex-1'>
        <Card
          bordered={false}
          className='shadow-2xl z-[1]'
          title={
            <Space>
              <ButtonGroup>
                <Button>部门列表</Button>
              </ButtonGroup>
            </Space>
          }
          headerExtraContent={
            <Space>
              <Button
                icon={<IconSettingStroked />}
                onClick={() => PageContext.setShowFloater(true)}></Button>
              <Button onClick={PageAction.addRecord}>新增</Button>
            </Space>
          }>
          <DepartmentFilter />
        </Card>
        <Card bordered={false}>
          <DepartmentTable />
        </Card>
      </div>
    </div>
  );
};

export default DepartmentCard;
